<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">打印机管理</div>
        <div class="search-wrap">
          <div class="search-left-box">
            <img class="img" src="@/assets/images/printer/computer.png" alt="" />
            <span class="search-left-text">当前计算机：{{ computerName }}</span>
          </div>
          <div class="search-right-box">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="searchParam.search"
                @input="onSearch"
                type="text"
                placeholder="搜索打印机名称"
              />
            </div>
          </div>
        </div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..." :data="tableData" @row-click="singleElection" :max-height="501">
            <el-table-column label=" " width="50">
              <template #default="scope">
                <el-radio class="radio" v-model="templateSelection" :label="scope.row.printer_id">&nbsp;</el-radio>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="printer_id" label="ID" />
            <el-table-column align="center" prop="nick_name" label="打印机名称" />
            <el-table-column align="center" prop="computer.nick_name" label="所属计算机" />
            <el-table-column align="center" prop="real_name" label="打印机实际名称" />
            <el-table-column align="center" label="是否为厨房打印机">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.type === 1">是</el-tag>
                <el-tag type="warning" v-else>否</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-content">
          <Pagination
            :total="pageListTotal"
            v-model:page="searchParam.page"
            v-model:limit="searchParam.limit"
            @pagination="getPrinterListData"
            :pageSizes="[15, 45, 75, 100]"
          />
        </div>
        <div class="desc-btn-box">
          <div class="desc"></div>
          <div class="btn-box">
            <div class="add-printer" @click="handleAction(1)">新增打印机</div>
            <template v-if="templateSelection">
              <div class="add-printer" @click="handleAction(2)">打印机设置</div>
              <div class="update-status" @click="handleAction(3)">修改</div>
              <div class="update-status" @click="handleAction(4)">删除</div>
            </template>
            <div class="computer" @click="handleAction(5)">计算机</div>
            <div class="update-status" @click="handleAction(6)">返回</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <PrinterCard @onChange="getPrinterListData" />
      </div>
    </div>
    <Add
      :actionType="actionType"
      v-model:addPrinterVisible="isShowAddPrinter"
      :printerEditData="printerEditData"
      @onConfirm="getPrinterListData"
    />
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import PrinterCard from './components/PrinterCard.vue'
import Add from './components/Add.vue'
import { printerList, printerDelete } from '@/api/computer'
import { debounce } from '@/utils/toolsValidate'
import { useRouter } from 'vue-router'
import Pagination from '@/components/Pagination/Index.vue'

const router = useRouter()

const tableData = ref([])
const loading = ref(false)
const searchParam = reactive({ limit: 15, page: 1, search: '', status: 1 })
const pageListTotal = ref(0)
const isShowAddPrinter = ref(false)
const actionType = ref('add')
const templateSelection = ref('')
const printerEditData = ref({})

// const computerName = computed(() => {
//   try {
//     const os = window.require && window.require('os')
//     return os ? os.hostname() : '无'
//   } catch (e) {
//     return '无'
//   }
// })

const computerName = ref('无')
const getComputerName = async () => {
  const name = await window.system.getComputerName()
  computerName.value = name
}

onMounted(() => {
  getComputerName()
  getPrinterListData()
})

function singleElection(row) {
  templateSelection.value = row.printer_id
  printerEditData.value = {
    isKitchen: Number(row.type),
    computer_id: row.computer_id,
    real_name: row.real_name,
    nick_name: row.nick_name,
    num: row.num,
    width: row.width,
    printer_id: row.printer_id
  }
}

function getPrinterListData() {
  loading.value = true
  printerList(searchParam).then(res => {
    if (res.status === 200) {
      tableData.value = res?.data?.list?.data || []
      pageListTotal.value = res?.data?.list?.total || 0
      loading.value = false
    }
  }).finally(() => {
    loading.value = false
  })
}

function handleAction(index) {
  if (index === 1) {
    actionType.value = 'add'
    isShowAddPrinter.value = true
    return
  }
  if (index === 2) {
    if (!templateSelection.value) {
      ElMessage.warning('请先选择对应的打印机')
      return
    }
    router.push({ name: 'PrintSetting', query: { printer_id: templateSelection.value } })
    return
  }
  if (index === 3) {
    if (!templateSelection.value) {
      ElMessage.warning('请先选择对应的打印机')
      return
    }
    actionType.value = 'edit'
    isShowAddPrinter.value = true
    return
  }
  if (index === 4) {
    if (!templateSelection.value) {
      ElMessage.warning('请先选择对应的打印机')
      return
    }
    ElMessageBox.confirm('您确认删除当前打印机？', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(() => {
        printerDelete({ printer_id: templateSelection.value }).then(res => {
          if (res.status === 200) {
            ElMessage.success('删除成功!')
            templateSelection.value = ''
            getPrinterListData()
          }
        })
      })
      .catch(() => {})
    return
  }
  if (index === 5) {
    router.push({ name: 'Computer' })
    return
  }
  if (index === 6) {
    router.back()
  }
}

const onSearch = debounce(function () {
  searchParam.page = 1
  getPrinterListData()
}, 500)
</script>

<style lang="scss" scoped>
::v-deep {
  .el-table { border-radius: 12px; }
  .el-table__body-wrapper { height: 580px; overflow-y: auto; }
  .el-table__body-wrapper::-webkit-scrollbar { width: 6px !important; height: 0 !important; }
  .el-table__body-wrapper::-webkit-scrollbar-thumb { height: 200px !important; background: #d2d2d2 !important; border-radius: 3px !important; }
  .el-table__body-wrapper::-webkit-scrollbar-track { display: none !important; }
  .el-table th.el-table__cell { background: #a85b62; color: #fff !important; }
  .el-input__inner { border-radius: 12px; }
  .el-radio__input.is-checked .el-radio__inner { border-color: #7c0a03; background: #7c0a03; color: #fff; }
}
.content-box { display: flex; align-items: flex-start; box-sizing: border-box; }
.content-box .left-box { width: 1284px; height: 960px; background: #ffffff; border-radius: 20px; box-shadow: 3px 0px 24px 0px rgba(0, 0, 0, 0.16); box-sizing: border-box; }
.content-box .left-box .title-box { display: flex; align-items: center; justify-content: center; height: 88px; background: #f4f4f4; border-radius: 20px 20px 0px 0px; font-size: 20px; font-family: PingFang SC, PingFang SC-Bold; font-weight: 700; text-align: center; color: #333333; }
.content-box .left-box .table-list-box { padding: 20px 30px 0 30px; height: 580px; box-sizing: border-box; }
.content-box .left-box .search-wrap { display: flex; align-items: center; justify-content: space-between; height: 88px; box-sizing: border-box; padding: 0 30px; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.04); }
.content-box .left-box .search-wrap .search-left-box { display: flex; align-items: center; width: 50%; }
.content-box .left-box .search-wrap .search-left-box .img { width: 30px; height: 30px; margin-right: 20px; }
.content-box .left-box .search-wrap .search-left-box .search-left-text { font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.content-box .left-box .search-wrap .search-right-box { display: flex; justify-content: flex-end; }
.content-box .left-box .search-wrap .search-right-box .search-input-box { width: 302px; height: 46px; border: 1px solid #d2d2d2; border-radius: 25px; box-sizing: border-box; display: flex; align-items: center; padding-left: 20px; }
.content-box .left-box .search-wrap .search-right-box .search-input-box .search-icon { flex-shrink: 0; width: 24px; height: 24px; }
.content-box .left-box .search-wrap .search-right-box .search-input-box .input { border: none; outline: none; width: 180px; font-size: 16px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; margin-left: 10px; }
.content-box .left-box .pagination-content { display: flex; align-items: center; justify-content: center; margin-top: 80px; }
.content-box .left-box .desc-btn-box { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; padding-left: 50px; box-sizing: border-box; }
.content-box .left-box .desc-btn-box .desc { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-align: left; color: #333333; }
.content-box .left-box .desc-btn-box .btn-box { display: flex; align-items: center; justify-content: space-around; }
.content-box .left-box .desc-btn-box .btn-box div:hover { color: #7c0a03; border-color: #7c0a03; }
.content-box .left-box .desc-btn-box .btn-box .add-printer { display: flex; justify-content: center; align-items: center; width: 174px; height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 24px; cursor: pointer; }
.content-box .left-box .desc-btn-box .btn-box .update-status { display: flex; justify-content: center; align-items: center; width: 120px; height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; margin-right: 24px; cursor: pointer; }
.content-box .left-box .desc-btn-box .btn-box .computer { margin-right: 24px; display: flex; justify-content: center; align-items: center; cursor: pointer; width: 138px; height: 52px; background: #ffffff; border: 1px solid #333333; border-radius: 12px; font-size: 18px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; color: #333333; }
.right-box { margin-left: 30px; }
</style>
